<template>
  <div class="language-desc">
    <div v-if="!option.sure" class="language-card" :class="{ mt12: !isTitle }">
      <el-tabs type="border-card" v-model="option.activeKey" @tab-click="onTabClick">
        <el-tab-pane
          v-for="lang in languageTypeEnum"
          :key="lang.label"
          :label="lang.label"
          :name="lang.value"
        >
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 5 }"
            v-model="option[option.activeKey]"
            placeholder="请输入"
          ></el-input>
        </el-tab-pane>
      </el-tabs>
      <div v-if="!isTitle" class="card-btn text_r">
        <el-button type="primary" size="small" @click="onCardOk">确定</el-button>
        <el-button size="small" @click="onCardCancel">取消</el-button>
      </div>
    </div>

    <div v-else class="language-text mt6">
      <div class="left-txt">
        <span v-for="(lang, key) in optionText" :key="key">
          {{ lang }}
          <span v-show="key !== 'es-mx'">；</span>
        </span>
      </div>
      <div class="right-btn text-r">
        <el-button
          type="primary"
          size="small"
          class="mr6"
          :class="{ 'is-disabled': showCard }"
          @click="onTextEdit"
        >
          编辑
        </el-button>
        <el-popconfirm
          icon="el-icon-info"
          icon-color="red"
          title="确定删除吗？"
          @confirm="onTextDel"
        >
          <el-button slot="reference" type="danger" size="small">删除</el-button>
        </el-popconfirm>
      </div>
    </div>
  </div>
</template>

<script>
import { languageTypeEnum, languageDesc, languageKeys } from '@/const/question'

export default {
  name: 'LanguagePanel',
  props: {
    // 是否为问题题目
    isTitle: Boolean,
    // 信息描述
    value: {
      type: Object,
      default() {
        return { ...languageDesc }
      }
    },
    // 问题选项是否校验通过
    isPass: Boolean,
    // 检查当前是否有选项卡片
    showCard: Object
  },
  data() {
    return {
      languageTypeEnum,
      option: {},
      prevOption: {} // 上一次描述
    }
  },
  created() {
    this.init()
  },
  computed: {
    // 全语言文本显示
    optionText() {
      return Object.fromEntries(
        Object.entries(this.option).filter(([key, value]) => languageKeys.includes(key))
      )
    }
  },
  watch: {
    option(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    init(defaultOpt) {
      this.option = Object.assign({}, defaultOpt || this.value)
    },
    // 语言栏tab切换
    onTabClick() {
      this.$parent.form.validateField(this.isTitle ? 'questionTitle' : 'questionOptions')
    },
    /* -- start 问题选项 -- */
    onCardOk() {
      this.$parent.form.validateField('questionOptions')
      if (this.isPass) this.option.sure = true
    },
    onCardCancel() {
      this.$emit('cardCancel')
      if (this.option.edit) {
        this.option = { ...this.prevOption }
      }
    },
    onTextEdit() {
      // 当前有选项在输入不允许再新建
      if (this.showCard) {
        this.$message({
          message: '请先确定当前选项',
          type: 'error',
          center: true
        })
        return
      }

      this.prevOption = { ...this.option }
      this.option.sure = false
      this.option.edit = true
    },
    onTextDel() {
      this.$emit('textDel')
    }
    /* -- end -- */
  }
}
</script>

<style scoped lang="less">
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border: 0;
}

.language-desc {
  .language-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-txt {
      line-height: 20px;
      overflow: auto;
      margin-right: 10px;
    }
  }
}
</style>
